Setting the Margins of an HTML Element Box

You can set margins for top, right, bottom, and left sides of an HTML element box by either using the four properties, margin-top, margin-right, margin-bottom, and margin-left, or by using the margin shorthand property. The margins for an HTML element box can be specified in units, such as pixels, inches, centimeters, points, or in the form of a percentage value.

Let’s do the following steps to set the margins of an HTML element box:


<!DOCTYPE html>
<html>
<head>
<title>Setting the Margins of an HTML Element Box</title>
    <style type=”text/css”>
    div {border: thin dashed #ff0000; margin: 50px 20px 20px 30px; border-width: 3px;}
    </style>
</head>
<body>
    <h2>Setting the margin on a web page</h2>
    <div>
    <h4>Here is a list of students:</h4>
    <ul>
    <li>Sumit Saxena </li>
    <li>Amitabh kumar</li>
    <li>Rohit Jandal </li>
    <li>Jitendra Arya</li>
    <li>Avantika Srivastava</li>
    <li>Sanchita Sarkar</li>
    </ul>
</div>
</body>
</html>

Save the document with the name margin.html and open with browser.